<!DOCTYPE html>
<html>
<head>

<title>Cirpho</title>
<meta charset="utf-8" />

<link rel="stylesheet" href="jquery.mobile.structure-1.0.min.css" type="text/css" media="screen" title="cirpho" charset="utf-8">
<link rel="stylesheet" href="cirpho-mobile.min.css" type="text/css" media="screen" title="cirpho" charset="utf-8">
<link rel="stylesheet" href="jquery.Jcrop.css" type="text/css" media="screen" title="cirpho" charset="utf-8">
<link rel="stylesheet" href="confirm.css" type="text/css" media="screen" title="cirpho" charset="utf-8">
<link rel="stylesheet" href="cirpho.css" type="text/css" media="screen" title="cirpho" charset="utf-8">

<script type="text/javascript" charset="utf-8" src="phonegap-1.2.0.js"></script>
<script type="text/javascript" charset="utf-8" src="iscroll.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery-1.7.1.min.js"></script>

<script type="text/javascript" charset="utf-8" src="jquery.mobile-1.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery.Jcrop.js"></script>
<script type="text/javascript" charset="utf-8" src="cirphoCamera.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery.simplemodal.js"></script>

<script type="text/javascript" charset="utf-8" src="cirpho.js"></script>
</head>
<body style="background-color: #000000;">
	<!-- Start of first page: #empty -->
	<div data-role="page" id="empty" style="background-color: #000000;">
	
	</div><!-- /page empty -->
	
	<!-- Start of first page: #main -->
	<div data-role="page" id="main">
		<div id="wrapper">
			<div id="top-content">
				<div class="topcontent-left">
					<span><img src="images/logo.png" /></span>
				</div>
				<div class="topcontent-right">
					<div class="topcontent-right-gallery">
						<a href="#" onclick="getPhoto(pictureSource.PHOTOLIBRARY);" title="Gallery"><img src="images/gallery.png" /></a>
					</div>
					<div class="topcontent-right-reshot">
						<a href="#" onclick="capturePhoto();" title="Re-shot" data-theme="a"><img src="images/camera.png" /></a>
					</div>
					<div class="clear"></div>
				</div>
				<div class="clear"></div>
			</div>
			<div id="main-content">
				<div id="header-wrapper">
					<div id="header-left">
						<span>どうやって検索しますか？</span>
					</div>
					<div id="header-right" style="display: none">
						<a href="#">カテゴリに戻る</a>
					</div>
					<div class="clear"></div>
				</div>
				<div id="loadding" style="display:none">
					<span><img src="images/loading.gif" /></span><span class="loadding-text">ロード…</span>
				</div>
				<div id="menu-wrapper">
					<div class="menu-item-take-shot">
						<a href="#"><img src="images/take-shot-bg.png" /></a>
					</div>
					<div class="menu-item-gallery">
						<a href="#"><img src="images/gallery-bg.png" /></a>
						
					</div>
					<div class="menu-item-exit">
						<!-- <button onclick="exit();" data-icon="delete" data-iconpos="left">Exit</button> -->
						<!-- <a href="#" onclick="exit();"><img src="images/exit-bg.png" /></a> -->
						<a href="#"><img src="images/exit-bg.png" /></a>
					</div>
				</div>
				<div id="search-result" style="display:none">
					<div id="search-result-wrapper">
						<ul>
						</ul>
						<div class="clear"></div>
						<div class="report-button">
						</div>
					</div>
					
				</div>
				<div id="categories" style="display:none">
					<div id="categories-wrapper">
					</div>
				</div>
				<div id='confirm'>
					<div class='header'><span>送信完了</span></div>
					<div class='message'></div>
					<div class='buttons'>
						<div class='yes'><span>Ok</span></div>
					</div>
				</div>
			</div>
			<div id="bottom-content">
				<a class="display-menu" href="#" ><img src="images/menu-bg.png" /></a>
				<a class="how-to-use-page" href="#" ><img src="images/how-to-use.png" /></a>
				<div class="clear"></div>
			</div>
		</div>
	</div><!-- /page main -->
	
	<!-- Start of second page: #two -->
	<div data-role="page" id="image" data-theme="a">
		<div id="wrapper">
			<div id="top-content-image">
				<div class="topcontent-left">
					<span><img src="images/logo.png" /></span>
				</div>
				<div class="topcontent-right">
					<div class="topcontent-right-gallery">
						<a href="#" onclick="getPhoto(pictureSource.PHOTOLIBRARY);" title="Gallery"><img src="images/gallery.png" /></a>
					</div>
					<div class="topcontent-right-reshot">
						<a href="#" onclick="capturePhoto();" title="Re-shot" data-theme="a"><img src="images/camera.png" /></a>
					</div>
					<div class="clear"></div>
				</div>
				<div class="clear"></div>
			</div>
			<div id="main-content">
				<div id="header-wrapper">
					<div id="header-left-image">
						<span>検索対象を枠で囲んでください</span>
					</div>
					<div class="clear"></div>
				</div>
				<div id="image-data-wrapper">
					<div><img id="image-data" /></div>
				</div>
				<div id="done-button-wrapper">
					<div id="done-button">
						<a href="#" title="Done"><img src="images/ok-button.png" /></a>
					</div>
				</div>
				<form action="crop.php" method="post" onsubmit="return checkCoords();">
					<input type="hidden" id="x" name="x" />
					<input type="hidden" id="y" name="y" />
					<input type="hidden" id="w" name="w" />
					<input type="hidden" id="h" name="h" />
				</form>
			</div>
			<div id="bottom-content" class="bottom-content-image">
				<a class="display-menu" href="#" ><img src="images/menu-bg.png" /></a>
				<a class="how-to-use-page" href="#" ><img src="images/how-to-use.png" /></a>
				<div class="clear"></div>
			</div>
		</div>
	</div><!-- /page image -->
	
	<!-- Start of third page: #popup -->
	<div data-role="page" id="howtouse">
		<div id="wrapper">
			<div id="top-content-howtouse">
				<div class="topcontent-left">
					<span><img src="images/logo.png" /></span>
					
				</div>
				<div class="topcontent-right">
					<div class="topcontent-right-gallery">
						<a href="#" onclick="getPhoto(pictureSource.PHOTOLIBRARY);" title="Gallery"><img src="images/gallery.png" /></a>
					</div>
					<div class="topcontent-right-reshot">
						<a href="#" onclick="capturePhoto();" title="Re-shot" data-theme="a"><img src="images/camera.png" /></a>
					</div>
					<div class="clear"></div>
				</div>
				<div class="clear"></div>
			</div>
			<div id="main-content">
				<div id="header-wrapper">
					<div id="header-left-howtouse">
						<span>使い方</span>
					</div>
					<div id="header-right-howtouse">
						<div id="how-to-use-close-wrapper">
							<a id="howtouse-close"  href="#" ><span>前のページに戻る</span></a>
						</div>
					</div>
					<div class="clear"></div>
				</div>
				<div id="howtouse-loadding" style="display:none">
					<span><img src="images/loading.gif" /></span><span class="loadding-text">ロード…</span>
				</div>
				<div id="howtouse-wrapper">
					<div id="how-to-use"></div>
				</div>
				<div id="checkbox-howtouse-wrapper">
					<input type="checkbox" name="checkbox-howtouse" id="checkbox-howtouse" class="custom" data-theme="c" onchange="howToUseChange();" />
					<label for="checkbox-howtouse">初期画面で表示しない</label>
				</div>
			</div>
			<div id="bottom-content" class="bottom-content-howtouse">
				<a class="display-menu" href="#" ><img src="images/menu-bg.png" /></a>
				<a class="how-to-use-page" href="#" ><img src="images/how-to-use.png" /></a>
				<div class="clear"></div>
			</div>
		</div>
	</div><!-- /page howtouse -->
</body>
</html>